/**
 * desc:计算textarea的高度
 */
let hiddenTextarea

const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
  padding-left:0.08rem;
  padding-right:0.08rem;
`

const CONTEXT_STYLE = [
    'letter-spacing',
    'line-height',
    'padding-top',
    'padding-bottom',
    'font-family',
    'font-weight',
    'font-size',
    'text-rendering',
    'text-transform',
    'width',
    'text-indent',
    'padding-left',
    'padding-right',
    'border-width',
    'box-sizing'
]

function calculateTextAreaNodeStyling(targetElement) {
    const style = window.getComputedStyle(targetElement)

    const boxSizing = style.getPropertyValue('box-sizing')

    const paddingSize = (
        parseFloat(style.getPropertyValue('padding-bottom'))
        + parseFloat(style.getPropertyValue('padding-top'))
    )

    const borderSize = (
        parseFloat(style.getPropertyValue('border-bottom-width'))
        + parseFloat(style.getPropertyValue('border-top-width'))
    )

    const contextStyle = CONTEXT_STYLE
        .map(name => `${name}:${style.getPropertyValue(name)}`)
        .join(';')

    return {
        contextStyle, paddingSize, borderSize, boxSizing
    }
}

export default function calcTextareaHeight(
    targetElement,
    minRows = 1,
    maxRows = 1,
    state = -1
) {
    if (!hiddenTextarea) {
        hiddenTextarea = document.createElement('textarea')
        document.body.appendChild(hiddenTextarea)
    }

    const {
        paddingSize,
        borderSize,
        boxSizing,
        contextStyle
    } = calculateTextAreaNodeStyling(targetElement)
    if (state > 0) {
        const HIDDEN_STYLE1 = `
            height:0 !important;
            visibility:hidden !important;
            overflow:hidden !important;
            position:absolute !important;
            z-index:-1000 !important;
            top:0 !important;
            right:0 !important;
            padding-left:0.08rem;
            padding-right:0.08rem;
            width:10.20rem;
        `
        hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE1}`)
    } else {
        hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
    }
    hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''

    let height = hiddenTextarea.scrollHeight
    const result:any = {}

    if (boxSizing === 'border-box') {
        height += borderSize
    } else if (boxSizing === 'content-box') {
        height -= paddingSize
    }

    hiddenTextarea.value = ''
    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
    if (maxRows > 1) {
        let maxHeight = singleRowHeight * maxRows
        if (boxSizing === 'border-box') {
            maxHeight = maxHeight + paddingSize + borderSize
        }
        height = Math.min(maxHeight, height)
    } else {
        let minHeight = singleRowHeight * minRows
        if (boxSizing === 'border-box') {
            minHeight = minHeight + paddingSize + borderSize
        }
        height = Math.max(minHeight, height)
        result.minHeight = `${minHeight}px`
    }
    result.height = `${height}px`
    if (hiddenTextarea.parentNode) {
        hiddenTextarea.parentNode.removeChild(hiddenTextarea)
    }
    hiddenTextarea = null
    return result
}
